<template>
  <!-- 详情 -->
  <el-dialog
    :visible.sync="detailInfo.Reimburseshow"
    :title="detailInfo.title"
    width="700px"
    destroy-on-close
    :close-on-click-modal="false">
    <el-form ref="saveForm" :model="detailInfo.form" :rules="detailInfo.rules" label-width="120px">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item :label="$t('图片')">
            <el-image
              style="
                width: 100px;
                height: 100px;
                object-fit: cover;
                border: #dfe4ed solid 1px;
                border-radius: 8px;
              "
              lazy
              class="goods-img-mini"
              :src="detailInfo.form.imgUrl + '?x-oss-process=image/resize,w_100/quality,q_70'" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="采购厂家">
            <el-input disabled v-model="detailInfo.form.manufacturersName" />
          </el-form-item>
          <el-form-item label="采购类型" prop="type">
            <el-select disabled style="width: 100%"  v-model="detailInfo.form.type">
              <el-option label="国内采购" :value="1" />
              <el-option label="酒水采购" :value="2" />
              <el-option label="日本当地采购" :value="3" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="sku">
            <el-input disabled v-model="detailInfo.form.skuNo" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <!-- 库位号 -->
          <el-form-item :label="$t('库位号')">
            <el-input disabled v-model="detailInfo.form.spNo" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="中文名">
            <el-input disabled v-model="detailInfo.form.skuNameCn" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <!-- 库位号 -->
          <el-form-item :label="$t('日文名')">
            <el-input disabled v-model="detailInfo.form.skuNameJp" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <!-- 采购数量 -->
          <el-form-item :label="$t('采购数量')" prop="num">
            <el-input-number
            disabled
              @change="setDetailInfo"
              style="width: 100%"
              v-model="detailInfo.form.num"
              controls-position="right"
              :precision="0"
              :min="1" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <!-- 采购数量 -->
          <el-form-item :label="$t('采购总价')" prop="payPrice">
            <el-input
            disabled
              type="number"
              @change="setDetailInfo"
              style="width: 100%"
              :placeholder="$t('请输入')"
              v-model="detailInfo.form.payPrice">
              <!-- 付款总价单位 1-RMB 2-JPY 3-USD -->
              <el-button slot="append">
                <el-select style="width: 100px" disabled v-model="detailInfo.form.payPriceUnit">
                  <el-option label="RMB" :value="1" />
                  <el-option label="JPY" :value="2" />
                  <el-option label="USD" :value="3" />
                </el-select>
              </el-button>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row v-if="!detailInfo.disabled" :gutter="20" style="margin: 4px 0 20px 0">
        <el-col :span="20" :offset="3">
          <el-radio v-model="priceComputeType" label="1" style="margin: 0 60px 0 20px"
            >按采购价+退货价计算</el-radio
          >
          <el-radio v-model="priceComputeType" label="2">仅按采购价计算</el-radio>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <!-- 备注 -->
          <el-form-item :label="$t('备注')">
            <el-input type="textarea" disabled :rows="6" v-model="detailInfo.form.purchaseRemark" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('采购单价')">
            <el-input
              disabled
              type="number"
              style="width: 100%"
              :placeholder="$t('请输入')"
              v-model="detailInfo.form.webPrice1">
              <!-- 付款总价单位 1-RMB 2-JPY 3-USD -->
              <el-button slot="append">
                <el-select disabled style="width: 100px" v-model="detailInfo.form.payPriceUnit">
                  <el-option label="RMB" :value="1" />
                  <el-option label="JPY" :value="2" />
                  <el-option label="USD" :value="3" />
                </el-select>
              </el-button>
            </el-input>
          </el-form-item>
          <el-form-item :label="$t('日元总价')">
            <el-input
              disabled
              type="number"
              style="width: 100%"
              :placeholder="$t('请输入')"
              v-model="detailInfo.form.skuTotalValue">
              <!-- 付款总价单位 1-RMB 2-JPY 3-USD -->
              <el-button slot="append">
                <el-select disabled style="width: 100px" v-model="skuUnitPriceUnit">
                  <el-option label="RMB" :value="1" />
                  <el-option label="JPY" :value="2" />
                  <el-option label="USD" :value="3" />
                </el-select>
              </el-button>
            </el-input>
          </el-form-item>
          <el-form-item :label="$t('日元单价')">
            <el-input
              disabled
              type="number"
              style="width: 100%"
              :placeholder="$t('请输入')"
              v-model="detailInfo.form.skuUnitPrice">
              <!-- 付款总价单位 1-RMB 2-JPY 3-USD -->
              <el-button slot="append">
                <el-select disabled style="width: 100px" v-model="skuUnitPriceUnit">
                  <el-option label="RMB" :value="1" />
                  <el-option label="JPY" :value="2" />
                  <el-option label="USD" :value="3" />
                </el-select>
              </el-button>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <!-- 退货数量 -->
          <el-form-item :label="$t('退货数量')" prop="refundNum">
            <el-input type="number" @input="rulerValue"  v-model="detailInfo.form.refundNum" @change="setDetailInfo" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <!-- 退货金额 -->
          <el-form-item :label="$t('退货金额')" prop="refundAmount">
            <el-input
              @change="setDetailInfo"
              type="number"
              style="width: 100%"
              :placeholder="$t('请输入')"
              v-model="detailInfo.form.refundAmount">
              <!-- 付款总价单位 1-RMB 2-JPY 3-USD -->
              <el-button slot="append">
                <el-select disabled style="width: 100px" v-model="detailInfo.form.refundAmountUnit">
                  <el-option label="RMB" :value="1" />
                  <el-option label="JPY" :value="2" />
                  <el-option label="USD" :value="3" />
                </el-select>
              </el-button>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <!-- 退货原因 -->
          <el-form-item :label="$t('退货原因')" prop="refundReason">
            <el-input  type="textarea" :rows="1" v-model="detailInfo.form.refundReason" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('汇率')">
            <el-input
              disabled
              type="number"
              style="width: 100%"
              :placeholder="$t('请输入')"
              v-model="detailInfo.form.conversionRate">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- <el-row v-if="!detailInfo.disabled" :gutter="20" style="margin: 4px 0 20px 0">
        <el-col :span="20" :offset="3">
          <el-radio v-model="isUpdatePrice" label="1">不更新最近按采购价</el-radio>
          <el-radio v-model="isUpdatePrice" label="2" style="margin: 0 60px 0 20px"
            >更新最近按采购价</el-radio
          >
        </el-col>
      </el-row> -->
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">
        <!-- 关闭 -->
        {{ $t('关闭') }}
      </el-button>
      <!--
        {{ detailInfo.form.status }}
            审核状态
            0-未审核
            1-审核
            -->
      <!-- 审核前可以修改，审核后不能修改 -->
      <el-button v-show="!detailInfo.disabled" v-hasPermi="['distribution:purchase:setPurchaseRefundInfo']" @click="handleSave" type="primary">
        <!-- 保 存 -->
        {{ $t('修改') }}
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import { setPurchaseRefundInfo } from '@/api/purchasingManage/manufacturerPurchaseOrder'
export default {
  name: 'ErpDistributionPlusWebParticulars',

  data() {
    return {
      skuUnitPriceUnit: 2,
      isUpdatePrice: '1',
      priceComputeType: '1',
    }
  },
  props: {
    detailInfo: {
      type: Object,
    },
    deliver_goods_cn_list: {
      type: Array,
    },
    purchase_type_list: {
      type: Array,
    },
  },

  methods: {
        /**限制输入框的值 */
        rulerValue(){
        if (this.detailInfo.form.refundNum>Number(this.detailInfo.form.num)) {
          this.detailInfo.form.refundNum=Number(this.detailInfo.form.num)
        }
        if (this.detailInfo.form.refundNum<0) {
          this.detailInfo.form.refundNum = 0
        }
    },
    /**取消 */
    cancel(){
      this.skuUnitPriceUnit= 2,
      this.isUpdatePrice= '1', 
      this.priceComputeType= '1'
      this.$parent.detailInfo.Reimburseshow =false
    },
    /**修改采购信息 */
    handleSave() {
      this.detailInfo.form.isUpdatePrice = this.isUpdatePrice
      this.detailInfo.form.priceComputeType = this.priceComputeType
      // setPurchaseRefundInfo(this.detailInfo.form).then((res) => {
      //   console.log(res, '返回数据')
      // })

      this.$refs['saveForm'].validate((valid) => {
        if (valid) {
          setPurchaseRefundInfo(this.detailInfo.form).then((res) => {
            const { code, data, msg } = res
            if (code === 200) {
              this.$message({ type: 'success', message: msg })

              this.detailInfo.Reimburseshow = false
              this.$emit('relaod');
            }
          })
        }
      })

    },
    /*计算价格**/
    setDetailInfo() {
      const conversionRate = this.detailInfo.form.conversionRate
      if (this.priceComputeType == 1) {
        if(this.detailInfo.form.num ==this.detailInfo.form.refundNum) {
        this.detailInfo.form.webPrice1 = 0
        this.detailInfo.form.skuTotalValue =0
        this.detailInfo.form.skuUnitPrice =0
        return
       }
        
        //采购单价 = 真实总价/真实数量
        this.detailInfo.form.webPrice1 =(
          (this.detailInfo.form.payPrice - this.detailInfo.form.refundAmount) /
            (this.detailInfo.form.num - this.detailInfo.form.refundNum)
        ).toFixed(2)
        // 日元总价 = 真实总价*汇率
        this.detailInfo.form.skuTotalValue = Math.round(
          (this.detailInfo.form.payPrice - this.detailInfo.form.refundAmount) * +conversionRate,
        )

        //日元单价 = 日元总价/真实数量

        this.detailInfo.form.skuUnitPrice = Math.round(
          this.detailInfo.form.skuTotalValue / (this.detailInfo.form.num - this.detailInfo.form.refundNum),
        )
      } else if (this.priceComputeType == 2) {
        //采购单价 = 总价/数量
        this.detailInfo.form.webPrice1 = (this.detailInfo.form.payPrice / this.detailInfo.form.num).toFixed(2)

        // 日元总价 = 总价*汇率
        this.detailInfo.form.skuTotalValue = Math.round(this.detailInfo.form.payPrice * +conversionRate)

        //日元单价 = 日元总价/真实数量

        this.detailInfo.form.skuUnitPrice = Math.round(
          this.detailInfo.form.skuTotalValue / this.detailInfo.form.num)
      }
    },
  },
  watch: {
    priceComputeType: {
      immediate: true,
      handler: function(type) {
        this.setDetailInfo()
      },
    },
    detailInfo:{
      deep:true,
      handler:function(){
        if (this.detailInfo.Reimburseshow ) {
          this.setDetailInfo()
        }
      }
    }
  },
}
</script>

<style lang="scss" scoped></style>
